<template>
  <div class="wf hfNoTop y jc" style="padding:10px">
    <h2 v-text="'入库单'" />
    <el-table :data="tabData" border stripe highlight-current-row style="width: 100%;">
      <el-table-column fixed type="index" label="行号" width="50" />
      <el-table-column prop="uid" label="物料号" width="180">
        <template slot-scope="scope" v-if="!id">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="scope.row.uid"
            :fetch-suggestions="uidSearch"
            placeholder="请输入内容"
            value-key="uid"
          >
            <template slot-scope="{ item }">
              <div v-text="item.uid+item.name" class="bx" @click="uidSelect(item,scope.$index)" />
            </template>
          </el-autocomplete>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="sum" label="数量" width="100">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.sum"
            @input="proving(scope.$index)"
            @focus="$event.currentTarget.select();"
            placeholder="请输入数量"
          />
        </template>
      </el-table-column>
      <el-table-column prop="depository" label="仓库" width="150">
        <template slot-scope="scope">
          <el-cascader
            :show-all-levels="false"
            :options="tree.depository"
            :props="{ value:'id',label:'name',checkStrictly: true}"
            v-model="scope.row.depository"
          />
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="项目" width="100" />
      <el-table-column prop="project" label="列次" width="150">
        <template slot-scope="scope">
          <el-cascader
            :show-all-levels="false"
            :options="tree.project"
            :props="{ value:'id',label:'name'}"
            v-model="scope.row.project"
            @change="scope.row.projectName=tree.project.v2item($event[0]).name"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="操作" width="80">
        <template slot-scope="scope">
          <el-button
            @click="tabData.splice(scope.$index,1)"
            v-text="'移除'"
            type="primary"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remarks" />
        </template>
      </el-table-column>
    </el-table>
    <div class="wf x zb" style="padding-top:10px">
      <div class="x jc">
        <el-button
          @click="tabData.push($cp(defItems))"
          v-text="'新增一行'"
          type="success"
          size="mini"
          v-if="id==0"
        />
      </div>
      <div class="wf h40px x jc ze">
        <el-button @click="tabData=[]" v-text="'清空'" type="warning" size="mini" v-if="id==0" />
        <el-button
          @click="send"
          v-text="'提交'"
          type="danger"
          size="mini"
          :disabled="!tabData.length"
        />
        <el-button @click="$router.back();" v-text="'退出'" type="info" size="mini" />
      </div>
    </div>
  </div>
</template>
<script>
// import name from "./name";
export default {
  components: {},
  props: ["data"],
  watch: {
    "$gd.depository"(a) {
      this.tree.depository = a.arr2tree();
    },
    "$gd.project"(a) {
      this.tree.project = a.arr2tree();
    },
    data(a) {
      this.tabData = a.info;
    }
  },
  data() {
    return {
      tabData: [],
      defItems: {
        id: 0,
        uid: "",
        name: "",
        sum: 0,
        depository: [],
        project: [],
        remarks: ""
      },
      tree: {
        depository: [],
        project: []
      }
    };
  },
  computed: {
    id() {
      return Number(this.$route.params.id);
    }
  },
  created() {
    if (this.$gd.depository)
      this.tree.depository = this.$gd.depository.arr2tree();
    if (this.$gd.project) this.tree.project = this.$gd.project.arr2tree();
    if (this.$isset(this.data)) this.tabData = this.data.info;
  },
  methods: {
    test(a, b) {
      if (b) {
        console.log(a);
        return;
      }
      console.log(this.$cp(a));
    },
    send() {
      if (this.tabData.length < 1) {
        this.$message.console.error("请填写数据后再提交");
      }
      try {
        const data = {
          cmd: 2,
          val: {
            token: sessionStorage.token,
            table: "itemIO",
            items: this.$cp(this.tabData).map((a, b) => {
              if (!a.id && a.uid) throw "第" + (b + 1) + "行 请输入[物料编号]后 鼠标选择对应物料!";
              if (!a.uid) throw "第" + (b + 1) + "行 [物料编号] 不能为空!";
              if (!a.sum) throw "第" + (b + 1) + "行 [数量] 不能为空!";
              if (!a.depository.length)
                throw "第" + (b + 1) + "行 [仓库] 不能为空!";
              if (!a.project.length)
                throw "第" + (b + 1) + "行 [列次] 不能为空!";
              a.depository = a.depository[a.depository.length - 1];
              a.project = a.project[a.project.length - 1];
              return a;
            })
          }
        };
        this.$post(data, res => {
          console.log(res);
        });
      } catch (error) {
        this.$message.error(error);
      }
    },
    change(a, b) {
      switch (a) {
        case 1:
          this.form = this.$cp(this.defForm);
          this.createProject = !this.createProject;
          break;
        case 2:
          this.form = this.$cp(this.defForm);
          this.createProject = !this.createProject;
          break;
        case 3:
          this.form = this.current;
          this.createProject = !this.createProject;
          break;
        case 101:
          this.current = b;
          // console.log(this.$cp(b));
          break;

        default:
          break;
      }
      // console.log(this.$cp(this.form));
    },
    uidSearch(queryString, cb) {
      var restaurants = this.$gd.items;
      var results = queryString
        ? restaurants.filter(
            (function(res) {
              return ret => {
                return ret.uid.toLowerCase().indexOf(res.toLowerCase()) === 0;
              };
            })(queryString)
          )
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    uidSelect(a, b) {
      this.tabData[b].id = a.id;
      this.tabData[b].name = a.name;
    },
    proving(a) {
      const t = Number(this.tabData[a].sum);
      this.tabData[a].sum = t ? t : 0;
      // $event.currentTarget.select()
    }
  }
};
</script>

<style lang="less" scoped>
</style>
